<template>
<div>
     <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
         <span class="iconfont abs-back ">&#xe624;</span>
     </router-link>
     <div 
     class="header-fixed" v-show="!showAbs" :style="opacityStyle"
     >
         景点详情
        <router-link to="/" >
         <span class="iconfont header-fixed-back">&#xe624;</span>
        </router-link>
     </div>
     
</div>

</template>

<script>
    export default {
        name:"DetailHeader",
        data(){
          return {
              showAbs:true,
              opacityStyle:{
                  opacity:0
              }
          }
        },
        activated(){
         window.addEventListener('scroll',this.handleScroll)},
         deactivated(){
         window.removeEventListener('scroll',this.handleScroll)
         },
    
        methods:{
          handleScroll(){
              const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
              if(scrollTop>60){
                 let opacity=scrollTop/140
                  opacity=opacity>1 ? 1 : opacity
                  this.opacityStyle={opacity}
                  this.showAbs=false
                 
              }else{
                  this.showAbs=true
                  
              }
          } 
        }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header-abs
  position absolute
  left .2rem
  top .4rem
  width .7rem
  height .7rem
  border-radius .4rem
  background rgba(0,0,0,.6)
  text-align center
  color #fff
  .abs-back
     line-height .7rem
.header-fixed
  position fixed
  z-index 99
  top 0
  left 0
  right 0
  height $headerheight
  line-height $headerheight
  text-align center
  font-size .32rem
  color #fff 
  background-color $bgcolor
  
  .header-fixed-back
     position absolute
     width .64rem
     text-align  center
     font-size .4rem
     left 0
     top  0
     color #fff     
</style>